<template>
    <div class="max-w-screen-lg m-auto pt-3">
        <div>
            <h2 class="text-3xl font-bold tracki text-center mt-12 sm:text-5xl ">订阅会员</h2>
            <p class="max-w-3xl mx-auto mt-4 text-xl text-center ">学习网站所有课程，并提供高清版视频下载,
                免费提供教程案例下载学习使用</p>
            <p class="mt-1 text-gray-400 text-sm text-center">注：视频、源码等属于虚拟物品，购买后不支持退款（有疑问可联系作者）</p>
        </div>
            <div class="mt-24 container space-y-12 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8">
                <div class="relative p-8  border border-gray-200 rounded-2xl shadow-sm flex flex-col">
                    <div class="flex-1">
                        <h3 class="text-xl font-semibold ">普通版</h3>
                        <p class="mt-4 flex items-baseline ">
                            <span class="text-5xl font-extrabold tracking-tight text-red-500">￥49</span><span
                                class="ml-1 text-xl font-semibold text-red-500">/年</span>
                        </p>
                        <p class="mt-6 ">您可以获得的权益</p>
                        <ul role="list" class="mt-6 space-y-6">
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">一年内下载本网站的所有源码</span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">一年内下载本网站的所有课程</span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 "> 一年内观看本网站的所有视频课程</span></li>
                        </ul>
                    </div>
                    <paymentBtn />
                </div>
                <div class="relative p-8  border border-gray-200 rounded-2xl shadow-sm flex flex-col">
                    <div class="flex-1">
                        <h3 class="text-xl font-semibold ">钻石版</h3>
                        <p
                            class="absolute top-0 py-1.5 px-4 bg-emerald-500 text-white rounded-full text-xs font-semibold uppercase tracking-wide  transform -translate-y-1/2">
                            最受欢迎</p>
                        <p class="mt-4 flex items-baseline ">
                            <span class="text-5xl font-extrabold tracking-tight text-red-500">￥99</span><span
                                class="ml-1 text-xl font-semibold text-red-500">/不限时</span>
                        </p>
                        <p class="mt-6 ">您可以获得到的权益</p>
                        <ul role="list" class="mt-6 space-y-6">
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">不限时学习</span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">永久下载本网站的所有源码</span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">永久下载本网站的所有课程</span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">永久观看观看本网站的所有视频课程 </span></li>
                            <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg><span class="ml-3 ">联系作者</span></li>
                        </ul>
                    </div>
                    <paymentBtn />
                </div>
            </div>
    </div>
</template>

<script setup lang="ts">
import paymentBtn from '../../components/front/payment/paymentBtn.vue'

</script>

<style lang="scss" scoped ></style>